<template>
  <div id="background">
  </div>
  <div class="centered-container">
    <a-form class="login-wrapper"
    name="normal_login"
  >
    <a-form-item 
      label="用户名"
      name="username"
    >
      <a-input v-model:value="username" style="width: 200px; ">
        <template #prefix>
          <UserOutlined class="site-form-item-icon" />
        </template>
      </a-input>
    </a-form-item>

    <a-form-item
      label="密码"
      name="password"
    >
      <a-input-password v-model:value="password" style="width: 215px;" >
        <template #prefix>
          <LockOutlined class="site-form-item-icon" />
        </template>
      </a-input-password>
    </a-form-item>

    <a-form-item>
      <a-button type="primary" html-type="submit" @click="userLog">
        登录
      </a-button>
      <a-button type="primary" html-type="submit" style="margin-left:120px;" @click="userRegister">
        注册
      </a-button>
    </a-form-item>
  </a-form>
  </div>
</template>

<script lang="ts" setup>
import {onMounted,ref} from 'vue';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import axios from '../config/axios'
import {useRouter} from 'vue-router'
import { message } from 'ant-design-vue';

const router = useRouter()

const username = ref();
const password = ref();

const userLog = async()=>{
  const res = await axios.post('/user/login',{
    userAccount:username.value,
    userPassword:password.value
  })
  if(res.data.code === 0){
    message.success("登录成功")
    router.push('/user')
  }else{
    message.error("登录失败")
  }
}

const userRegister = ()=>{
  router.push('/user/register')
}

</script>
<style>
.centered-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#background {
  background: url("../assets/whiteduck.jpg") no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: '100%,100%';
  position: fixed;
}
.login-wrapper {
  /* 样式设置可以根据你的需求进行调整 */
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>

